<script setup>
import { computed } from 'vue';
import Table from '@/components/Table/index.vue';
import Descriptions from '@/components/Descriptions/index.vue';
// 订单详情表格标题
const columns = computed(() => [
  {
    label: '订单编号',
    prop: 'model',
  },
  {
    label: '下单时间',
    prop: 'createTime',
  },
  {
    label: '预计交期',
    prop: 'createBy',
  },
  {
    label: '订单状态',
    prop: 'brand',
  },
]);
// 订单详情表格数据
const tableData = [
  {
    id: 1,
    model: 'VR37000003305FA100',
    createTime: '2023-10-08 13:40',
    brand: 'yageo',
    parameter: '0402 1nF ±10% 50V X7R',
    components: 'FR-4',
    dosage: 'FR-4',
    stock: ' 总共：1000',
    notes: '$ 100.20',
  },
];

// PCB信息描述列表标题
const pcbColumns = computed(() => [
  {
    label: '板材类型',
    props: '1',
  },
  {
    label: '板子数量 ',
    props: '2',
  },
  {
    label: '板子层数',
    props: '3',
  },
  {
    label: '板子长度',
    props: '4',
  },
  {
    label: '板子宽度',
    props: '3',
  },
  {
    label: '板子厚度',
    props: '4',
  },
  {
    label: '是否接受打叉',
    props: '5',
  },
  {
    label: '拼板数',
    props: '6',
  },
  {
    label: '产品类型',
    props: '7',
  },
  {
    label: '拼板方式',
    props: '8',
  },
  {
    label: '外层铜厚',
    props: '8',
  },
  {
    label: '内层铜厚',
    props: '8',
  },
  {
    label: '阻抗控制',
    props: '8',
  },
  {
    label: '阻焊颜色',
    props: '8',
  },
  {
    label: '字符颜色',
    props: '8',
  },
  {
    label: '阻焊覆盖',
    props: '8',
  },
  {
    label: '焊盘喷镀',
    props: '8',
  },
  {
    label: '沉金厚度',
    props: '8',
  },
  {
    label: '金手指',
    props: '8',
  },
  {
    label: '线路测试',
    props: '8',
  },
  {
    label: '是否接受打叉',
    props: '8',
  },
  {
    label: '四线低阻过孔',
    props: '8',
  },
  {
    label: '包装要求',
    props: '8',
  },
  {
    label: 'Gerber文件',
    props: '8',
    isLink: true,
    func: () => downloadFile(),
  },
]);

// 订单详情数据
const orderDetail = {
  1: 333333,
  2: 333333,
  3: 333333,
  4: 333333,
  5: 333333,
  6: 333333,
  7: 333333,
  8: '坐标文件1',
};

// 下载文件
const downloadFile = () => {
  alert('downloadFile');
};
</script>
<template>
  <div class="wrapper">
    <div class="order-detail container">
      <div class="block-container">
        <div class="title-wrap">
          <img src="@/assets/images/icons/icon-title.png" alt="" />
          <h2 class="title">PCB订单详情</h2>
          <img src="@/assets/images/icons/icon-title.png" alt="" />
        </div>
        <Table class="info-table" :data="tableData" :columns="columns"> </Table>
      </div>
      <div class="block-container">
        <div class="title-wrap">
          <img src="@/assets/images/icons/icon-title.png" alt="" />
          <h2 class="title">{{$t('smt.PCBInfo')}}</h2>
          <img src="@/assets/images/icons/icon-title.png" alt="" />
        </div>
        <Descriptions :column="pcbColumns" :data="orderDetail"> </Descriptions>
      </div>
      <div class="block-container">
        <div class="title-wrap">
          <img src="@/assets/images/icons/icon-title.png" alt="" />
          <h2 class="title">收货地址</h2>
          <img src="@/assets/images/icons/icon-title.png" alt="" />
        </div>
        <p class="express">545455</p>
      </div>
      <div class="block-container">
        <div class="title-wrap">
          <img src="@/assets/images/icons/icon-title.png" alt="" />
          <h2 class="title">快递方式</h2>
          <img src="@/assets/images/icons/icon-title.png" alt="" />
        </div>
        <p class="express">DHL全球快递</p>
      </div>
      <div class="block-container">
        <div class="title-wrap">
          <img src="@/assets/images/icons/icon-title.png" alt="" />
          <h2 class="title">价格</h2>
          <img src="@/assets/images/icons/icon-title.png" alt="" />
        </div>
        <div class="price">
          <div class="price-item">
            <p class="label">PCB价格：</p>
            $102
          </div>
          <div class="price-item">
            <p class="label">SMT价格：</p>
            $102
          </div>
          <div class="price-item">
            <p class="label">BOM价格：</p>
            $102
          </div>
          <div class="price-item">
            <p class="label">快递价格：</p>
            $102
          </div>
          <div class="price-item">
            <p class="label">{{ $t('mall.tax_fee') }}</p>
            $102
          </div>
          <div class="price-item blod-item">
            <p class="label">合计：</p>
            $102
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.wrapper {
  background: #f5f5f5;
  padding: 32px 0 258px;
  .order-detail {
    border-radius: 8px;
    padding: 60px 32px;
    background: #fff;
    &.container {
      width: 1440px;
      margin: 0 auto;
    }

    .block-container {
      &:first-child {
        padding-bottom: 24px;
      }
      .title-wrap {
        display: flex;
        align-items: center;
        padding-bottom: 32px;
        > img {
          width: 16px;
        }
        .title {
          padding: 0 12px;
          color: #383838;
          font-size: 20px;
          font-weight: 700;
        }
      }

      .info-table {
        --el-table-header-text-color: #fff !important;
        --el-table-header-bg-color: var(--mall-color-primary) !important;
        --el-table-row-hover-bg-color: transparent;
      }

      .express {
        padding-bottom: 24px;
        color: #666666;
        font-size: 14px;
      }

      .price {
        &-item {
          padding-bottom: 16px;
          display: flex;
          align-items: center;
          color: #383838;
          font-size: 14px;
          > .label {
            width: 130px;
          }
          &.blod-item {
            padding-top: 6px;
            font-weight: 700;
          }
        }
      }
    }
  }
}
// ::v-deep .el-table {
// }

::v-deep .el-descriptions {
  &__cell {
    line-height: 19px !important;
  }
  &__label {
    color: #383838 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }
}
</style>
